@charset "utf-8";

@import "reset";
@import "common";

@function vw($px) {
  @return $px/750px * 100 * 1vw;
}

.web {
  header {
    position: absolute;
    width: 100%;
    background: white;
    top: 0;
    left: 0;
    .psifl {
      width: vw(706px);
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: vw(48px) 0 vw(20px);
      a {
        .button_box {
          width: vw(124px);
          height: vw(58px);
          color: black;
          font-size: vw(26px);
          text-align: center;
          line-height: vw(58px);
          border-radius: vw(29px);
          box-sizing: border-box;
          border: vw(1px) solid $index_color;
        }
      }
      .search_box {
        font-size: vw(26px);
        font-weight: bold;
      }
      .city_box {
        width: vw(164px);
        height: vw(60px);
        border: vw(2px) solid $index_color;
        box-sizing: border-box;
        padding-left: vw(14px);
        position: relative;
        select {
          width: 99%;
          height: 99%;
          border: none;
          outline: none;
          -webkit-appearance: none; //用来去掉标签自带样式
        }
        &::after {
          content: "";
          display: block;
          border-top: vw(12px) solid $index_color;
          border-right: vw(14px) solid transparent;
          border-bottom: vw(0px) solid transparent;
          border-left: vw(14px) solid transparent;
          position: absolute;
          top: 50%;
          left: 80%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
  section {
    width: 100%;
    position: absolute;
    top: vw(124px);
    bottom: vw(120px);
    overflow-y: auto;
    .kv {
      .kv_top {
        width: vw(704px);
        height: vw(206px);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        position: relative;
        .genre {
          text-align: center;
          .genre_tu {
            width: vw(148px);
            height: vw(148px);
            border-radius: 50%;
            overflow: hidden;
            img {
              width: 100%;
            }
          }
        }
      }
      ul {
        width: vw(100px);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        li {
          width: vw(15px);
          height: vw(15px);
          // border: vw(1px) solid $index_color;
          background: $index_color;
          border-radius: 50%;
        }
      }
    }
    .subtitle {
      width: vw(709px);
      height: vw(65px);
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      .subtitle_left {
        display: flex;
        .subtitle_tu {
          width: vw(56px);
          height: vw(46px);
          overflow: hidden;
          img {
            height: 100%;
          }
        }
        span {
          font-size: vw(30px);
          align-self: center;
          margin-left: vw(10px);
        }
      }
      a {
        .subtitle_right {
          margin-top: vw(-52px);
          span {
            font-size: vw(24px);
            color: black;
          }
          i {
            display: inline-block;
            width: vw(25px);
            height: vw(25px);
            border: 1px solid $index_color;
            border-radius: 50%;
            color: $index_color;
            font-size: vw(20px);
            text-align: center;
            line-height: vw(25px);
          }
        }
      }
    }
    .xuantu {
      width: vw(709px);
      height: vw(206px);
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 auto;
      li {
        width: vw(134px);
        height: vw(134px);
        overflow: hidden;
        img {
          width: 100%;
        }
      }
    }
  }
}
